<template>
	<view class="player-container">
		<view class="url-input-container">
			<input type="text" v-model="videoUrl" placeholder="请输入视频地址" class="video-url-input" />
			<button @click="playVideo" class="play-button">播放</button>
		</view>

		<view class="video-container" v-if="currentVideoUrl">
			<video id="myVideo" :src="currentVideoUrl" controls autoplay class="video-player" ref="videoRef"></video>
			<button @click="captureFrame" class="capture-button">截取当前画面</button>
		</view>

		<view class="screenshot-container" v-if="screenshotSrc">
			<image :src="screenshotSrc" mode="widthFix" class="screenshot-image"></image>
		</view>

		<view class="video-info" v-if="videoInfo">
			<view class="video-title">{{ videoInfo.title || '未知标题' }}</view>
			<view class="cover-container" v-if="videoInfo.cover">
				<image :src="videoInfo.cover" mode="aspectFill" class="video-cover"></image>
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		useLink
	} from './hooks/useLink';

	const videoUrl = ref('');
	const currentVideoUrl = ref('');
	const {
		getVideoLink
	} = useLink();
	const videoRef = ref(null);
	const videoInfo = ref(null); // 添加视频信息对象
	const screenshotSrc = ref('');
	const videoContext = ref(null);

	onMounted(() => {
		// 初始化视频上下文
		videoContext.value = uni.createVideoContext('myVideo');
		console.log("videoContext.value", videoContext.value)
	})

	// 添加截图方法
	async function captureFrame() {
		// 获取视频元素
		const video = videoRef.value;
		if (!video) {
			uni.showToast({
				title: '视频未加载',
				icon: 'none'
			});
			return;
		}

		// #ifdef H5
		// 创建canvas并截取当前帧
		const canvas = document.createElement('canvas');
		const h5Video = document.querySelector('video');
		canvas.width = h5Video.videoWidth;
		canvas.height = h5Video.videoHeight;
		const ctx = canvas.getContext('2d');
		ctx.drawImage(h5Video, 0, 0, canvas.width, canvas.height);
		screenshotSrc.value = canvas.toDataURL('image/png');
		// #endif

		// #ifdef APP-PLUS || MP-WEIXIN
		console.log("videoContext app");
		// appCaptureFrame();
		videoContext.value.pause();

		console.log("videoContext.value.pause", videoContext.value.pause)

		const videoPlayer = plus.video.createVideoPlayer('myVideo', {
		  src: currentVideoUrl.value,
		  top: 0,
		  left: 0,
		  width: '100%',
		  height: '400rpx'
		});
		
		videoPlayer.captureScreen({
		  format: 'png',
		  success: (res) => {
		    screenshotSrc.value = res.target;
		  }
		});
		// #endif
	}



	function playVideo() {
		if (!videoUrl.value) {
			uni.showToast({
				title: '请输入视频地址',
				icon: 'none'
			});
			return;
		}
		videoInfo.value = null;
		getVideoLink(videoUrl.value).then((res) => {
			console.log("res", res);
			if (res.success) {
				currentVideoUrl.value = res.message.medias[0].url;
				videoInfo.value = {
					title: res.message.title,
					cover: res.message.thumbnail
				}
			}
		})
		// currentVideoUrl.value = videoUrl.value;
	}
</script>

<style lang="scss" scoped>
	.player-container {
		padding: 30rpx;
	}

	.url-input-container {
		display: flex;
		margin-bottom: 30rpx;

		.video-url-input {
			flex: 1;
			height: 80rpx;
			border: 1px solid #ddd;
			border-radius: 8rpx;
			padding: 0 20rpx;
			margin-right: 20rpx;
		}

		.play-button {
			width: 160rpx;
			height: 80rpx;
			background-color: #007aff;
			color: #fff;
			border: none;
			border-radius: 8rpx;
			font-size: 28rpx;
		}
	}

	.video-container {
		width: 100%;

		.video-player {
			width: 100%;
			height: 400rpx;
			background-color: #000;
		}

		.capture-button {
			margin-top: 20rpx;
			background-color: #67c23a;
			color: #fff;
			border: none;
			border-radius: 8rpx;
			font-size: 28rpx;
			height: 80rpx;
			line-height: 80rpx;
		}
	}

	.video-info {
		margin-top: 20rpx;
		padding: 20rpx;
		background-color: #f8f8f8;
		border-radius: 8rpx;

		.video-title {
			font-size: 32rpx;
			font-weight: bold;
			margin-bottom: 16rpx;
			color: #333;
		}

		.cover-container {
			width: 100%;

			.video-cover {
				width: 100%;
				height: 300rpx;
				border-radius: 8rpx;
			}
		}
	}

	.screenshot-container {
		margin-top: 30rpx;

		.screenshot-image {
			width: 100%;
			border-radius: 8rpx;
			border: 1px solid #eee;
		}
	}
</style>